<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

    <title>3D模型查看器</title>

    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        body {
            overflow: hidden;
        }

        input,
        select,
        button,
        textarea {
            border: 1px solid white;
            background-color: black;
            color: white;
        }

        option {
            background-color: black;
            color: white;
        }

        a {
            color: white;
        }

        #glmol01 {
            width: 100%;
            height: 100%;
            background-color: black;
            position: absolute;
        }

        .settings {
            position: absolute;
            right: 0px;
            top: 10%;
            background-color: grey;
            -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            margin: 0px;
            padding: 10px;
            -moz-transform-origin: 110% 100%;
            -webkit-transform-origin: 110% 100%;
            -webkit-border-radius: 10px 10px 0px 0px;
            -moz-border-radius: 10px 10px 0px 0px;
        }

        .controller {
            position: absolute;
            width: 0px;
            right: 0px;
            top: 10%;
            background-color: rgba(0, 0, 0, 0.65);
            color: white;
        }

        .tabBox {
            position: absolute;
            padding: 0px;
            color: white;
            bottom: 0px;
            height: 20px;
            width: 60%;
        }

        .bottomTab {
            background-color: black;
            border: 1px solid white;
            color: white;
            margin: 0px;
            padding: 10px 10px 0px 10px;
            -webkit-border-radius: 10px 10px 0px 0px;
            -moz-border-radius: 10px 10px 0px 0px;
        }

        .insideTab {
            border: 1px solid white;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            margin: 0px;
            overflow: scroll;
        }

        .tabBox p,
        .tabBox h1,
        .tabBox ul {
            margin-left: 10px;
            font-size: 90%;
        }

        #formMore {
            display: none;
            position: fixed;
            top: 25%;
            /*left: 25%;*/
            bottom: 25%;
            /*right: 25%;*/
            border: 1px solid white;
            width: 100%;
            height: 40%;
            padding-top: 30px;
            padding-left: 40px;
            background-color: rgba(0, 0, 0, 0.65);
            margin: 0px;
            z-index: 9999;
        }

        #formMore label {
            width: 200px;
            white-space: nowrap;
            margin-bottom: 10px;
            color: white;
        }

        #formMore input {
            color: white;
        }

        /*#formMore input[type="text"] {*/
        /*    width: 100%;*/
        /*    padding: 10px;*/
        /*    margin-bottom: 20px;*/
        /*    border: 1px solid #fff;*/
        /*    border-radius: 5px;*/
        /*    font-size: 16px;*/
        /*}*/
    </style>
</head>

<body>

<div id="glmol01"></div>
<!--<input type="hidden" id="molData" th:value="${molData}" />-->

<!--<div class="tabBox" id="glmol01_infobox" style="left: 40%; z-index: 2;">-->
<!--   <span class="bottomTab">使用说明</span>-->
<!--   <div class="insideTab" style="overflow: auto;">-->
<!--      <h1>使用说明</h1>-->
<!--      <p>GLmol &#45;&#45; Molecular Viewer on WebGL/Javascript<br>-->
<!--         Version 0.47 (20120827)</p>-->
<!--      <p>This program is written by biochem_fan and released under LGPL. Please visit <a-->
<!--              href="http://webglmol.sfjp.jp/">my project page</a> for the details and source code distribution.</p>-->
<!--      <p>Comments and Suggestions are welcome. Please mail to biochem_fan at users.sourceforge.jp or write in <a-->
<!--              href="http://sourceforge.jp/projects/webglmol/forums/">the forum</a>.</p>-->
<!--      <h1>How to use</h1>-->
<!--      <ul>-->
<!--         <li>Rotation: left button</li>-->
<!--         <li>Translation: middle button or Ctrl-key + left button</li>-->
<!--         <li>Zoom: mousewheel or right button(up/down) or Shift-key + left button(up/down)</li>-->
<!--         <li>Slab: left button + Ctrl-key. horizontal move adjusts near clipping plane, vertical move far clipping-->
<!--            plane.</li>-->
<!--      </ul>-->
<!--      <p>You can also change mouse mode with radio buttons at right-bottom corner.</p>-->
<!--   </div>-->
<!--</div>-->

<div class="tabBox" id="glmol01_srcbox" style="display: none; left: 10%; z-index:0;">
    <span class="bottomTab">Load</span>
    <div class="insideTab">
        You can load PDB, MOL2, SDF/MOL(MDL not SYBYL) or XYZ files <br>
        -from local disk (don't worry. your file will not be uploaded),
        <input id="glmol01_file" type="file" size=1>
        <button onClick="loadFile()">Load from file</button>
        <br>
        -from RCSB PDB server,
        PDBID: <input id="glmol01_pdbid" value="2POR" size=4>
        <button
                onClick="download('pdb:' + $('#glmol01_pdbid').val())">Download
        </button>
        <br>
        -from PubChem server,
        Compound ID(CID): <input id="glmol01_cid" value="2244" size=4>
        <button
                onClick="download('cid:' + $('#glmol01_cid').val())">Download
        </button>
        <br>
        -or from the textarea
        below.<br>
        <textarea wrap="off" id="glmol01_src" style="width: 100%; height: 8em; overflow:scroll;"></textarea><br>
        <button onClick="glmol01.loadMolecule(); $('#loading').hide();">Reload molecule from textarea</button>
    </div>
</div>

<div class="tabBox" id="glmol01_viewbox" style="display: none; left: 5%; z-index:1; bottom: 10px;">
    <span class="bottomTab">设置</span>

</div>

<div
        style="position: absolute; color: white; left: 10px; bottom: 5px; z-index: 99; background-color: rgba(0, 0, 0, 0.65);">
    <div style="display: none;">
        Color by
        <select id="glmol01_color">
            <option selected="selected" value="chainbow">spectrum</option>
            <option value="chain">chain</option>
            <option value="ss">secondary strcuture</option>
            <option value="b">B factor</option>
            <option value="polarity">polar/nonpolar</option>
        </select><br>
        <input id="glmol01_showMainchain" type="checkbox" checked>
        Main chain as
        <select id="glmol01_mainchain">
            <option selected="selected" value="thickRibbon">thick ribbon</option>
            <option value="ribbon">thin ribbon(faster)</option>
            <option value="strand">strand</option>
            <option value="cylinderHelix">cylinder & plate</option>
            <option value="chain">C alpha trace</option>
            <option value="tube">B factor Tube</option>
            <option value="bonds">bonds (everything)</option>
        </select><br>
        <input id="glmol01_showBases" type="checkbox" checked>
        Nucleic acid bases as
        <select id="glmol01_base">
            <option value="nuclStick">sticks</option>
            <option selected="selected" value="nuclLine">lines</option>
            <option value="nuclPolygon">polygons</option>
        </select><br>
        <input id="glmol01_line" type="checkbox">
        Side chains as lines<br>
        <input id="glmol01_doNotSmoothen" type="checkbox">Don't smooth beta-sheets in ribbons<br>
        <input id="glmol01_showNonBonded" type="checkbox">Non-bonded atoms (solvent/ions) as
        <select id="glmol01_nb">
            <option value="nb_sphere">spheres</option>
            <option selected="selected" value="nb_cross">stars</option>
        </select>
        <br>
        <input id="glmol01_showHetatms" type="checkbox" checked>
        Multiple bond option is for SDF/MOL file ONLY.<br>
        <input id="glmol01_cell" type="checkbox">Unit cell<br>
        <input id="glmol01_biomt" type="checkbox">Biological assembly (the last one defined)<br>
        <input id="glmol01_packing" type="checkbox">Crystal packing<br>
        <input id="glmol01_symopHetatms" type="checkbox">Show HETATMs in symmetry mates (slower)<br>
        Projection: <select id="glmol01_projection">
        <option value="orthoscopic">orthoscopic</option>
        <option selected="selected" value="perspective">perspective</option>
    </select><br>
        <button onClick="saveImage()">Take screenshot</button>
    </div>
    <div style="margin: 5px">
        <span style="font-size: large">设置</span><br>
    </div>
    <div style="margin: 5px">
        模型类别
        <select id="glmol01_hetatm" style="width: 46.5%">
            <option value="stick">棍状模型</option>
            <option value="ballAndStick">球棍模型</option>
            <option selected="selected" value="ballAndStick2">球棍模型 (支持多键)</option>
            <option value="sphere">比例模型</option>
            <option value="icosahedron">二十面体</option>
            <option value="line">线条模型</option>
        </select><br>
    </div>

    <div style="margin: 5px">
        背景颜色:
        <select id="glmol01_bgcolor">
            <option value="0xffffff">白色</option>
            <option selected="selected" value="0x000000">黑色</option>
            <option value="0x888888">灰色</option>
        </select>
        <button id="glmol01_reload">运用</button>
    </div>


</div>

<div
        style="position: absolute; color: white; right: 10px; bottom: 10px; z-index: 99; background-color: rgba(0, 0, 0, 0.65);">
    <input type="radio" name="glmol01_mouseMode" value="0" checked>旋转<br>
    <input type="radio" name="glmol01_mouseMode" value="1">移动<br>
    <input type="radio" name="glmol01_mouseMode" value="2">缩放<br>
    <input type="radio" name="glmol01_mouseMode" value="3">三维平板<br><br>
    <button onClick="glmol01.doFunc(function(mol) {mol.zoomInto(mol.getAllAtoms());mol.show()});">重置视角</button>
</div>

<div
        style="position: absolute; color: white; right: 10px; top: 60px; z-index: 99; background-color: rgba(0, 0, 0, 0.65);">
    <button id="btnMore" onClick="showMore()">查看有机物信息</button>
</div>
<div id="formMore">
    <label for="formula">化学式:</label>
    <input type="text" id="formula" name="formula"><br><br>
    <label for="smiles">SMILES:</label>
    <input type="text" id="smiles" name="smiles"><br><br>
    <label for="commonName">常见名称:</label>
    <input type="text" id="commonName" name="commonName"><br><br>
    <label for="molecularWeight">摩尔质量:</label>
    <input type="text" id="molecularWeight" name="molecularWeight"><br><br>
    <label for="averageMass">平均质量:</label>
    <input type="text" id="averageMass" name="averageMass"><br><br>
    <label for="monoisotopicMass">单同位素质量:</label>
    <input type="text" id="monoisotopicMass" name="monoisotopicMass"><br><br>
    <label for="nominalMass">名义质量:</label>
    <input type="text" id="nominalMass" name="nominalMass"><br><br>
</div>

<!-- <div id="loading"
   style="border: 2px solid white; position: absolute; color: white; left: 10%; top: 10%; padding: 5px; z-index:101;">
   <p>Loading structure from server... It may take a while.</p>
   <p>If you believe something went wrong, please make sure PDB ID is correct.<br>
      Please also make sure that WebGL is enabled in your browser.
   <ul>
      <li>Internet Explorer: sorry. IE doesn't support WebGL.</li>
      <li>Firefox (version 4 or later): try <a
            href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers#How_to_force-enable_blocked_graphics_features">force
            enable WebGL</a>.</li>
      <li>Chrome: try <a href="http://www.google.com/support/forum/p/Chrome/thread?tid=4b9244822aa2f2e0&hl=en">force
            enable WebGL</a>.</li>
      <li>Safari: have to <a href="https://discussions.apple.com/thread/3300585?start=0&tstart=0">enable WebGL
            manually</a>.</li>
   </ul>
   </p>
</div> -->

<div id="glmol01_pdbTitle"
     style="position:absolute; color: white; background-color: rgba(0, 0, 0, 0.65); font-size:80%"></div>

<script src="js/jquery-1.7.min.js"></script>
<script src="js/Three49custom.js"></script>
<script type="text/javascript" src="js/GLmol.js"></script>
<script th:inline="javascript">
    var molData = [[${molData}]];
    console.log(molData);
</script>
<script type="text/javascript">

    // var molData = document.getElementById("molData").value;
    addTab('#glmol01_srcbox', '400px', 0);
    addTab('#glmol01_viewbox', '400px', 1);
    addTab('#glmol01_infobox', '400px', 2);

    var glmol01 = new GLmol('glmol01', true);
    myLoadFile(molData);

    const button = document.querySelector('#btnMore');
    const form = document.querySelector('#formMore');

    $.ajax({
        type: "POST",
        url: "http://192.168.43.202:8080/chem/postDataByMol",
        data: JSON.stringify({"mol": molData}),
        contentType: "application/json",
        success: function (data) {
            console.log(data);
            var map = JSON.parse(data);
            $('#formula').val(map.formula);
            $('#smiles').val(map.smiles);
            $('#commonName').val(map.commonName);
            $('#molecularWeight').val(map.molecularWeight);
            $('#averageMass').val(map.averageMass);
            $('#monoisotopicMass').val(map.monoisotopicMass);
            $('#nominalMass').val(map.nominalMass);
        },
        error: function (xhr, status, error) {
            console.error(error);
        }
    })

    console.log(form);
    form.style.display = "none";

    function showMore() {
        console.log("111111111");
        console.log(form.style.display);
        if (form.style.display === "none") {
            console.log("nonenonenone");
            form.style.display = "block";
        } else {
            form.style.display = "none";
        }


    }


    window.addEventListener('click', (event) => {
        if (event.target === form || event.target === button) {
            return;
        }
        form.style.display = 'none';
    });

    var query = window.location.search.substring(1);
    if (query == '')
        myLoadFile(molData);
    else
        myLoadFile(molData);

    function download(query) {
        var baseURL = '';
        if (query.substr(0, 4) == 'pdb:') {
            query = query.substr(4).toUpperCase();
            if (!query.match(/^[1-9][A-Za-z0-9]{3}$/)) {
                alert("Wrong PDB ID");
                return;
            }
            uri = "http://www.pdb.org/pdb/files/" + query + ".pdb";
        } else if (query.substr(0, 4) == 'cid:') {
            query = query.substr(4);
            if (!query.match(/^[1-9]+$/)) {
                alert("Wrong Compound ID");
                return;
            }
            uri = "http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + query +
                "/SDF?record_type=3d";
        }

        $('#loading').show();
        $.get(uri, function (ret) {
            $("#glmol01_src").val(ret);
            glmol01.loadMolecule();
            $('#loading').hide();
        });
    }

    function addTab(tabId, height, zIndex) {
        $(tabId + ' .bottomTab').toggle(
            function () {
                $(tabId).css('z-index', 100).animate({
                    bottom: '0px',
                    'height': (window.innerWidth > 800) ? height : '600px'
                });
            },
            function () {
                $(tabId).css('z-index', zIndex).animate({bottom: '0px', 'height': '20px'});
            }
        );
    }

    function myLoadFile(molData) {

        $('#glmol01_src').val(molData);
        glmol01.loadMolecule();
        glmol01.defineRepresentation = defineRepFromController;
        $('#loading').hide();
    }

    function loadFile() {
        var file = $('#glmol01_file').get(0);
        if (file) file = file.files;
        if (!file || !window.FileReader || !file[0]) {
            alert("No file is selected. Or File API is not supported in your browser. Please try Firefox or Chrome.");
            return;
        }
        $('#loading').show();
        var reader = new FileReader();

        reader.onload = function () {
            console.log(reader.result);
            console.log(molData);
            $('#glmol01_src').val(molData);
            glmol01.loadMolecule();
            $('#loading').hide();
        };

        reader.readAsText(file[0]);
    }

    function saveImage() {
        glmol01.show();
        var imageURI = glmol01.renderer.domElement.toDataURL("image/png");
        window.open(imageURI);
    }

    $('#glmol01_reload').click(function (ev) {
        glmol01.defineRepresentation = defineRepFromController;
        glmol01.rebuildScene();
        glmol01.show();
    });

    function defineRepFromController() {
        var idHeader = "#" + this.id + '_';

        var time = new Date();
        var all = this.getAllAtoms();
        if ($(idHeader + 'biomt').attr('checked') && this.protein.biomtChains != "") all = this.getChain(all, this.protein.biomtChains);
        var allHet = this.getHetatms(all);
        var hetatm = this.removeSolvents(allHet);

        console.log("selection " + (+new Date() - time));
        time = new Date();

        this.colorByAtom(all, {});
        var colorMode = $(idHeader + 'color').val();
        if (colorMode == 'ss') {
            this.colorByStructure(all, 0xcc00cc, 0x00cccc);
        } else if (colorMode == 'chain') {
            this.colorByChain(all);
        } else if (colorMode == 'chainbow') {
            this.colorChainbow(all);
        } else if (colorMode == 'b') {
            this.colorByBFactor(all);
        } else if (colorMode == 'polarity') {
            this.colorByPolarity(all, 0xcc0000, 0xcccccc);
        }
        console.log("color " + (+new Date() - time));
        time = new Date();

        var asu = new THREE.Object3D();
        var mainchainMode = $(idHeader + 'mainchain').val();
        var doNotSmoothen = ($(idHeader + 'doNotSmoothen').attr('checked') == 'checked');
        if ($(idHeader + 'showMainchain').attr('checked')) {
            if (mainchainMode == 'ribbon') {
                this.drawCartoon(asu, all, doNotSmoothen);
                this.drawCartoonNucleicAcid(asu, all);
            } else if (mainchainMode == 'thickRibbon') {
                this.drawCartoon(asu, all, doNotSmoothen, this.thickness);
                this.drawCartoonNucleicAcid(asu, all, null, this.thickness);
            } else if (mainchainMode == 'strand') {
                this.drawStrand(asu, all, null, null, null, null, null, doNotSmoothen);
                this.drawStrandNucleicAcid(asu, all);
            } else if (mainchainMode == 'chain') {
                this.drawMainchainCurve(asu, all, this.curveWidth, 'CA', 1);
                this.drawMainchainCurve(asu, all, this.curveWidth, 'O3\'', 1);
            } else if (mainchainMode == 'cylinderHelix') {
                this.drawHelixAsCylinder(asu, all, 1.6);
                this.drawCartoonNucleicAcid(asu, all);
            } else if (mainchainMode == 'tube') {
                this.drawMainchainTube(asu, all, 'CA');
                this.drawMainchainTube(asu, all, 'O3\''); // FIXME: 5' end problem!
            } else if (mainchainMode == 'bonds') {
                this.drawBondsAsLine(asu, all, this.lineWidth);
            }
        }

        if ($(idHeader + 'line').attr('checked')) {
            this.drawBondsAsLine(this.modelGroup, this.getSidechains(all), this.lineWidth);
        }
        console.log("mainchain " + (+new Date() - time));
        time = new Date();

        if ($(idHeader + 'showBases').attr('checked')) {
            var hetatmMode = $(idHeader + 'base').val();
            if (hetatmMode == 'nuclStick') {
                this.drawNucleicAcidStick(this.modelGroup, all);
            } else if (hetatmMode == 'nuclLine') {
                this.drawNucleicAcidLine(this.modelGroup, all);
            } else if (hetatmMode == 'nuclPolygon') {
                this.drawNucleicAcidLadder(this.modelGroup, all);
            }
        }

        var target = $(idHeader + 'symopHetatms').attr('checked') ? asu : this.modelGroup;
        if ($(idHeader + 'showNonBonded').attr('checked')) {
            var nonBonded = this.getNonbonded(allHet);
            var nbMode = $(idHeader + 'nb').val();
            if (nbMode == 'nb_sphere') {
                this.drawAtomsAsIcosahedron(target, nonBonded, 0.3, true);
            } else if (nbMode == 'nb_cross') {
                this.drawAsCross(target, nonBonded, 0.3, true);

            }
        }

        if ($(idHeader + 'showHetatms').attr('checked')) {
            var hetatmMode = $(idHeader + 'hetatm').val();
            if (hetatmMode == 'stick') {
                this.drawBondsAsStick(target, hetatm, this.cylinderRadius, this.cylinderRadius, true);
            } else if (hetatmMode == 'sphere') {
                this.drawAtomsAsSphere(target, hetatm, this.sphereRadius);
            } else if (hetatmMode == 'line') {
                this.drawBondsAsLine(target, hetatm, this.curveWidth);
            } else if (hetatmMode == 'icosahedron') {
                this.drawAtomsAsIcosahedron(target, hetatm, this.sphereRadius);
            } else if (hetatmMode == 'ballAndStick') {
                this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, false, 0.3);
            } else if (hetatmMode == 'ballAndStick2') {
                this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, true, 0.3);
            }

        }
        console.log("hetatms " + (+new Date() - time));
        time = new Date();

        var projectionMode = $(idHeader + 'projection').val();
        if (projectionMode == 'perspective') this.camera = this.perspectiveCamera;
        else if (projectionMode == 'orthoscopic') this.camera = this.orthoscopicCamera;

        this.setBackground(parseInt($(idHeader + 'bgcolor').val()));

        if ($(idHeader + 'cell').attr('checked')) {
            this.drawUnitcell(this.modelGroup);
        }

        if ($(idHeader + 'biomt').attr('checked')) {
            this.drawSymmetryMates2(this.modelGroup, asu, this.protein.biomtMatrices);
        }
        if ($(idHeader + 'packing').attr('checked')) {
            this.drawSymmetryMatesWithTranslation2(this.modelGroup, asu, this.protein.symMat);
        }
        this.modelGroup.add(asu);
    };

    glmol01.defineRepresentation = defineRepFromController;

</script>

</body>

</html>